<template>
   <!-- 头部 -->
   <div class="header1">
      <div class="header_bottom">
        <div class="wrapper">
          <div class="header_bottom_container">
            <div class="left">
              <a href="#" @click='$router.push("/home")'><img src="@/assets/yxtx/logo_03.png" alt="" /></a>
            </div>
            <div class="right">
              <input type="text" />
              <a href="" class="sc"></a>
              <a @click='$router.push("/home")' class="block" style="cursor: pointer;">交大主页</a>
              <a href="#" class="block">新闻投稿</a>
            </div>
          </div>
          <div class="newList">
            <ul>
              <li v-for="item in categories.slice(0,12)" :key="item.id" @click='toArticle(item.category)'><a >{{item.category.name}}</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部 -->
</template>

<script>
  import { get } from "@/utils/request";
  export default {
    data() {
      return {
        // 分类参数
        categories: [],
      };
    },
    mounted() {
      // 监听页面滚动事件
    },
    methods: {
      // 查找所有资讯分类
      async FindAllCate() {
        let res = await get("/index/article/findCategoryArticles");
        // console.log(res);
        this.categories = res.data;
      },
      // 跳转到栏目信息页面
    toArticle(item){
      // 编程式导航跳转
      this.$router.push({
        path:"/article",
        query:item
      })
    }
   },
  
    created() {
      this.FindAllCate();
    },
  };
  </script>

  <style lang="scss">
    // 头部样式
.header1 {
  // float: left;
  .header_bottom {
    width: 100%;
    height: 300px;
    display: block;
    background: url(../assets/yxtx/topb_01.png) no-repeat;
    background-size: auto;
    background-size: 100% 100%;
    .header_bottom_container {
      display: flex;
      justify-content: space-between;
      height: 80px;
      // background-color: #836;
      padding-top: 30px;
      .right {
        padding-top: 20px;
        input {
          box-sizing: content-box;
          border: none;
          background: #ffffff;
          border: 1px solid #ffffff;
          line-height: 31px;
          height: 31px;
        }
        a {
          display: inline-block;
          margin-right: 10px;
        }
        .sc {
          width: 46px;
          height: 35px;
          vertical-align: bottom;
          position: relative;
          left: -5px;
          // background-color: #097;
          background: url(../assets/yxtx/seach_03.png) no-repeat;
        }
        .block {
          float: right;
          width: 65px;
          height: 25px;
          padding: 5px 15px;
          border: 1px solid #ffffff;
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }
    .newList {
      width: 800px;
      height: 80px;
      float: right;
      // margin-bottom: 40px;
      ul {
        li {
          display: inline-block;
          margin-left: 60px;
          a {
            line-height: 45px;
            color: #ffffff;
            font-size: 18px;
            font-weight: normal;
            cursor: pointer;
          }
        }
      }
    }
  }
}
  </style>